<template>
  <div class="tabbar">
    <!-- 导航标签组件 -->
    <mt-tabbar v-model="selected">
      <mt-tab-item
        :id="item.id"
        v-for="(item, index) of tabbarData"
        :key="index"
      >
        <img
          v-if="selected == item.id"
          slot="icon"
          :src="require(`../assets/imgs/d2/${index + 1}.png`)"
        />
        <img
          v-else
          slot="icon"
          :src="require(`../assets/imgs/d1/${index + 1}.png`)"
        />
        {{ item.text }}
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: "home",
    };
  },
 
  watch: {
    selected() {

        // 监听点击跳转路由
        this.link(this.selected);
      }
   
  },

  props: {
    tabbarData: Array, 
    link: { type: Function },
  },
};
</script>
<style>
.tabbar .mint-tabbar {
  box-shadow: 0px 0px 15px -7px;
  position: fixed;
  bottom: 0;
}
.tabbar .mint-tabbar > .mint-tab-item.is-selected {
  background-color: rgb(243, 239, 239);
  box-shadow: inset 0px -2px 10px -2px #555;
}
</style>
